<template>
    <div>
      <div class="canvas-draw-box" touch-action="none"></div>
      <div class="flex">
        <div>操作：</div>
        <el-button type="primary" @click="setPenStyle('select')">选择</el-button>
        <el-button type="primary" @click="setPenStyle('pen')">画笔</el-button>
        <el-button type="primary" @click="setPenStyle('wiper')">橡皮擦</el-button>
        <el-button type="primary" @click="undo">撤销</el-button>
        <el-button type="primary" @click="clear">清除</el-button>
        <el-button type="primary" @click="getData">笔迹获取</el-button>
        <el-button type="primary" @click="uploadJson">笔迹上传</el-button>
        <el-button type="primary" @click="getImage">图片获取</el-button>
      </div>
    </div>
</template>

<script>
// select:选中状态 pen:钢笔 eraser:橡皮檫
import drawCanvas from '../../../../utils/drawCanvas'
import { readBlobAsDataURL, dataURLtoFile } from '../../../../utils/file'
import mock from './mock'

const className = '.canvas-draw-box'

export default {
  name: "DrawCanvas",
  data() {
    return {
    }
  },
  mounted() {
    this.initDrawCanvas()
  },
  methods: {
    initDrawCanvas() {
      drawCanvas.initCoreWriting({ className })
      // 初始化绘制批改笔迹
      document.querySelector(className).editor.reDraw(mock)
    },
    setPenStyle(
      type // select: 选择  pen:画笔 wiper: 橡皮
    ) {
      drawCanvas.setPenStyle({
        className,
        type,
        ink: { // 画笔样式
          color: '#ffffff',
          penWidth: 5 * 0.2
        },
        wiper: { // 橡皮擦样式
          pointer: './static/assets/img/eraser.cur',
          pointerWidth: 57,
          pointerHeight: 69,
          radius: 8
        }
      })
    },
    // 清除
    clear() {
      document.querySelector(className).editor.clear()
    },
    // 撤销
    undo () {
      document.querySelector(className).editor.undo()
    },
    // 获取笔记数据
    getData() {
      document.querySelector(className).editor.forceUpdate() // 强制更新（避免绘制没有完成）
      let data = drawCanvas.getCoreWritingDataSingle({ className })
      console.log(data)
    },
    // 笔记json上传
    uploadJson() {
      document.querySelector(className).editor.forceUpdate() // 强制更新（避免绘制没有完成）
      let data = drawCanvas.getCoreWritingDataSingle({ className })
      var blob = new window.Blob([JSON.stringify(data)], { type: '' })
      readBlobAsDataURL(blob, (res) => {
        let date = new Date()
        let file = dataURLtoFile(res, `draw_${date.getTime()}.json`)
        console.log(file)
        // AJAX TODO
      })
    },
    // 获取图片
    getImage() {
      document.querySelector(className).editor.forceUpdate() // 强制更新（避免绘制没有完成）
      
      const curDom = document.querySelector(className)
      const canvas = curDom.querySelector(`.mw-rendering-canvas`)
      const mimeType = 'image/png'
      let base64Post = canvas.toDataURL(mimeType, 1.0) // 批改笔迹图片
      let date = new Date()
      let filePost = dataURLtoFile(base64Post, `draw_image_${date.getTime()}.png`) // 批改笔迹图片
      console.log(base64Post, filePost)
      // ajax todo
    }
  }
};
</script>

<style lang="less" scoped>
.canvas-draw-box {
  width: 800px;
  height: 400px;
  background-color: #003A36;
  margin: 20px auto;
}
</style>
